<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/ace.min.css" />
  <link rel="stylesheet" href="css/style.css"/>
 <script type="text/javascript" src="js/vue.min.js"></script>
 <script type="text/javascript" src="js/axios.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>生成订单</title>
</head>

<body>
<div id="app">
<div class="page-content">
 <div class="center"><a href="#" class="btn btn-primary">确认报价</a><a  class=" btn btn-info" href="javascript :;" onClick="javascript :history.back(-1);">取消</a></div>
 <div class="Inquiry_info Order_Details_style">
   <div class="Numbering">项目编号<b>{{haperObj.o_number}}</b></div>
  <div>
   <ul class="clearfix">
    <li><label class="label_name">项目名称</label><span>{{haperObj.project_name}}</span></li>
    <li><label class="label_name">加油地点</label><span>{{haperObj.place}}</span></li>
    <li><label class="label_name">预计加油时间</label><span>{{haperObj.prime_date}}</span></li>
    <li><label class="label_name">船名</label><span>{{haperObj.boat_name}}</span></li>
   </ul>
  </div>
  <div class="Item_Details">
  <table id="" class="table table-striped table-bordered table-hover">
      <thead>
       <tr>
        <th>产品名称</th>
        <th>采购数量</th>
        <th>单位</th>
        <th width="160">投标当天江苏省柴油最高限价（元/吨）</th>
        <th width="160">报价当天江苏省柴油最高限价（元/吨）</th>
        <th class="label_name" v-for="i in modulesData">
         <P class="name">{{i.supplier}}</P>
         <P class="price">
          <span class="right_border">入围价</span>
          <span>最高限价</span></P>
        </th>
       </tr>
      </thead>
     <tbody>
     <tr v-for="(i,index) in modulesData[0].breed">
      <td>{{i}}</td>
      <td>{{dMData[index].purchase}}</td>
      <td>吨</td>
      <td>{{modulesData[0].now_fix[index]}}</td>
      <td >{{dMData[index].quote_max}}</td>
      <td class="price" v-for="(j,inx) in modulesData">
       <div class="tb_price right_border">{{ j.finalist[index] }}</div>
       <div class="tb_price">{{dMData[index].sup_max[inx]}}</div>
      </td>
     </tr>
     </tbody>
     </table>
  </div>
  <div class="Manager_style" v-for="(i,inx) in modulesData">
   <span class="title_name">{{i.supplier}}报价</span>
   <div class="Rankings_style">
    <table class="table table-striped table-bordered table-hover">
     <thead>
      <th width="">产品名称</th>
      <th width="">采购数量</th>
      <th width="">供应商报价（元/吨）</th>
      <th width="">小计（元）</th>
      <th width="">合计（元）</th>    
      <th width="">合同附件</th>
      </tr>
     </thead>
     <tbody>
      <tr>
      <td colspan="4" class="table_jiage">
       <table width="100%" cellpadding="0" cellspacing="0" >
        <tr style=" border-bottom:1px solid #ddd" v-for="(j,index) in modulesData[0].breed">
        <td width="">{{j}}</td>
         <td width="">{{dMData[index].purchase}}</td>
         <td width=""><input  type="text" style=" margin:5px;" v-model="quotationData[index][inx].purchase_quantity"/></td>
         <td width="">{{dMData[index].purchase*quotationData[index][inx].purchase_quantity}}</td>
        </tr>
       </table>
      <td>{{numTotal(inx)}}</td>
      <td ><button type="button" class="btn btn-info File_Scan">浏览</button></td>
      </tr>     
     </tbody>
    </table>
   </div>
  </div>
  <div class="Tips_content">
  <h3>询价说明：</h3>
  <p>及时处理</p>
  </div>
  <div class="center"><a href="#" class="btn btn-primary" @click.prevent="confirm()">确认报价</a>
   <a  class=" btn btn-info" href="待响应询价.html" >取消</a></div>
 </div>
</div>
<div id="File_Scan_style" style="display:none;"><img src="images/1.jpg" /></div>
</div>
<!--[if !IE]> -->
		<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
 //弹出一个iframe层
$('.File_Scan').on('click', function(){
    layer.open({
        type: 1,
        title: '文件合同扫描件',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['600px' , ''],
        content: $('#File_Scan_style')
    });
});
</script>
<script>
 new Vue({
  el:"#app",
  data:{
   //项目id
   o_id:0,
   //模板id
   m_id:0,
   //模板数据
   modulesData:[],
   //除模板数据
   dMData:[],
   //头数据
   haperObj:{},
   //供应商报价数据
   quotationData:[],
   //供应商总报价
   priceData:[],

  },
  methods:{
   getInfo(){
    let mn =parseInt(this.m_id)
    axios.get("modules/findModule.do?m_id="+mn).then(dt =>{
     this.modulesData = [];
     for (let i = 0; i < dt.data.length; i++) {
      let fn=JSON.stringify(dt.data[i].breed)
      let comData = {
       ms_id:dt.data[i].ms_id.split(","),
       supplier:dt.data[i].supplier,
       breed:fn.split(","),
       finalist: dt.data[i].finalist.split(","),
       now_fix:dt.data[i].now_fix.split(",")
      };
      this.modulesData.push(comData)
     }
     this.supsData=[]
    })
    axios.get("modules/supSer.do?o_id="+this.o_id).then(dt =>{
     for (let i = 0; i < dt.data.length; i++) {
      let supObj = {
       ms_id: dt.data[i].ms_id.split(","),
       purchase:dt.data[i].purchase,
       quote_max:dt.data[i].quote_max,
       sup_max:dt.data[i].sup_max.split(",")
      }
      this.dMData.push(supObj)
     }
     for (let i = 0; i < this.dMData.length; i++) {
      let qd=[]
      for (let j = 0; j <this.dMData[0].sup_max.length ; j++) {
           let q = {
            purchase_quantity:0
           }
           qd.push(q)
      }
      this.quotationData.push(qd)
     }
    })
    axios.get("orders/idSer.do?o_id="+this.o_id).then(dt =>{
     this.haperObj=dt.data
    })
   },
   confirm(){
    let minPrice = Infinity; // 初始化为一个较大的值
    let index = 0;

    for (let i = 0; i < this.quotationData[0].length; i++) {
     let a = 0;
     for (let j = 0; j < this.quotationData.length; j++) {
      a += this.quotationData[j][i].purchase_quantity;
     }
     this.priceData.push(a);

     if (a < minPrice) {
      minPrice = a;
      index = i;
     }

    }
    for (let i = 0; i < this.quotationData.length; i++) {
     let br =encodeURIComponent(JSON.stringify(this.modulesData[0].breed[i]));
     let breed=br.replace(/\\/g,'')
     let price=parseInt(this.quotationData[i][index].purchase_quantity)
     let num=parseInt(this.dMData[i].purchase)
     axios.get("modules/addOD.do?o_id="+this.o_id+"&breed="+breed+"&price="+price+"&purchase_quantity="+num)
    }
    let jsonData = this.modulesData[index].supplier;
    let jsonString = JSON.stringify(jsonData);
    let parsedData = JSON.parse(jsonString);
    axios.get(`orders/待确认/${this.o_id}/update.do`)
    axios.get("orders/updateSupplier.do?o_id="+this.o_id+"&supplier="+parsedData)
    this.$message({
     type: 'success',
     message: '提交成功!'
    });
    location.href="已响应询价.html"
   }
  },
  mounted(){
   const urlParams=new URLSearchParams(window.location.search);
   this.o_id=urlParams.get("o_id")
   this.m_id=urlParams.get("m_id")
   this.getInfo()

  },
  computed:{
   numTotal() {
    return function(i) {
     let a = 0;
     for (let j = 0; j < this.quotationData.length; j++) {
      a += this.dMData[j].purchase * this.quotationData[j][i].purchase_quantity;
     }
     return a;
    }
   }
  }

 })
</script>
</body>
</html>
